<template>
  <page class="carousel-age">
    <TitleBar title="推送方式设置管理" refresh />
    <div class="data-lie">
      <div class="data-top">
        <h1>筛选查询</h1>
        <p>APP首页轮播图标题：</p>
        <div class="data-input">
          <el-input v-model="titleInput" placeholder="APP首页轮播图标题" />
        </div>
        <p>发布人员：</p>
        <div class="data-input">
          <el-input v-model="developers" placeholder="全部" />
        </div>
        <p>发布时间：</p>
        <div class="data-input">
          <el-date-picker type="date" class="release-time" placeholder="选择日期" v-model="releaseTime" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
        </div>
        <el-button type="primary" style="margin-left: 56px" @click="screenButton">查询结果</el-button>
        <el-button type="primary" style="margin-left: 56px" @click="openModal" :disabled="disabled">添加轮播图</el-button>
      </div>
      <div class="edge" />
      <template>
        <el-table ref="multipleTable" class="table-class" :data="tableData" border tooltip-effect="dark" @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="100"
              align="center"
            />
          <el-table-column align="center" label="编号" width="239" prop="id">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column align="center" prop="title" width="393" label="APP首页轮播图标题" />
          <el-table-column align="center" prop="createTime" label="发布时间" show-overflow-tooltip />
          <el-table-column align="center" prop="userCode" label="发布人员" show-overflow-tooltip />
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="dialogTableVisible = true,seeDetail(scope.row)">查看</el-button>
              <el-button type="text" @click="changeVisible = true,changeDetail(scope.row)" style="color: rgba(245,108,108,1);">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-button type="primary" style="margin-top: 50px;" @click="delAll(multipleSelection)">批量删除</el-button>
      <!--      分页内容-->
      <div class="pagination-block">
        <el-pagination
          class="showpag"
          prev-text="上一页"
          next-text="下一页"
          :background="true"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next,total,slot, jumper"
          :total="totalNum"
          @current-change="currentPageNum"
        >
          <div class="page-number" layout="slot">
            <div class="jump-button">跳至</div>
          </div>
        </el-pagination>
      </div>
    </div>
    <!--    弹出窗-->
    <div class="messageBox">
      <el-dialog center :visible.sync="dialogFormVisible">
        <div slot="title">
          <div class="left-icon" />
          <p class="title-name">添加APP首页轮播图</p>
        </div>
        <el-form :model="formA" :rules="contentRules">
          <el-form-item prop="abstract" label="APP首页轮播图标题：" :label-width="formLabelWidth">
            <el-input v-model="formA.titleA" auto-complete="off" placeholder="请输入信息标题" />
          </el-form-item>
          <el-form-item prop="abstract" label="APP首页轮播图描述：" :label-width="formLabelWidth">
            <el-input
              v-model="formA.describes"
              :rows="4"
              type="textarea"
              placeholder="请输入轮播图描述"
              resize="none"
            />
          </el-form-item>
          <el-form-item prop="abstract" label=" APP首页轮播图图片：" :label-width="formLabelWidth">
            <p>点击下方上传轮播图</p>
            <el-upload
              :action="uploadUrl"
              list-type="picture-card"
              :data="token"
              :show-file-list="false"
              :file-list="fileList"
              :on-change="handleRemove"
              :on-success="hanldesucc"
            >
              <img
                v-if="url"
                :src="'http://'+url"
                class="avatar"
                style="width: 300px;height: 175px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="dialogImageUrl"
                alt=""
              >
            </el-dialog>-->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!--          <el-button class="up-img">上传图片</el-button>-->
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false,upContent()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- <el-dialog center :visible.sync="dialogTableVisible">
             <div slot="title">
               <div class="left-icon" />
               <p class="title-name">修改APP首页轮播图</p>
             </div>
             <el-form :model="form" :rules="contentRules">
               <el-form-item prop="abstract" label="APP首页轮播图标题：" :label-width="formLabelWidth">
                 <el-input v-model="form.name" auto-complete="off" placeholder="请输入信息标题" />
               </el-form-item>
               <el-form-item prop="abstract" label="APP首页轮播图描述：" :label-width="formLabelWidth">
                 <el-input v-model="form.name" :rows="4" type="textarea" placeholder="请输入轮播图描述" />
               </el-form-item>
               <el-form-item prop="abstract" label="APP首页轮播图图片：" :label-width="formLabelWidth">
                 <el-input v-model="form.name" :rows="4" type="textarea" />
               </el-form-item>
             </el-form>
             <div slot="footer" class="dialog-footer">
               <el-button class="up-img" @click="dialogTableVisible = false">更换图片</el-button>
               <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
             </div>
      </el-dialog>-->
      <!-- 修改 -->
      <el-dialog center :visible.sync="changeVisible">
        <div slot="title">
          <div class="left-icon" />
          <p class="title-name">查看APP首页轮播图</p>
        </div>
        <el-form :model="formB" :rules="contentRules">
          <el-form-item prop="abstract" label="APP首页轮播图标题：" :label-width="formLabelWidth">
            <el-input v-model="formB.title" auto-complete="off" placeholder="请输入信息标题" />
          </el-form-item>
          <el-form-item prop="abstract" label="APP首页轮播图描述：" :label-width="formLabelWidth">
            <el-input
              v-model="formB.describes"
              :rows="4"
              type="textarea"
              placeholder="请输入轮播图描述"
              resize="none"
            />
          </el-form-item>
          <el-form-item prop="abstract" label=" APP首页轮播图图片：" :label-width="formLabelWidth">
            <p>点击下方修改轮播图</p>
            <el-upload
              :action="uploadUrl"
              list-type="picture-card"
              :data="token"
              :show-file-list="false"
              :file-list="fileList"
              :on-change="handleRemove"
              :on-success="hanldechange"
            >
              <img
                v-if="formB.url"
                :src="'http://'+formB.url"
                class="avatar"
                style="width: 300px;height: 175px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="formB.url"
                alt=""
              >
            </el-dialog>-->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!--          <el-button class="up-img">上传图片</el-button>-->
          <el-button @click="changeVisible = false">取 消</el-button>
          <el-button type="primary" @click="changeVisible = false,changeContent()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 查看 -->
      <el-dialog center :visible.sync="dialogTableVisible">
        <div slot="title">
          <div class="left-icon" />
          <p class="title-name">查看APP首页轮播图</p>
        </div>
        <el-form :model="formB" :rules="contentRules">
          <el-form-item prop="abstract" label="APP首页轮播图标题：" :label-width="formLabelWidth">
            <el-input v-model="formB.title" disabled auto-complete="off" placeholder="请输入信息标题" />
          </el-form-item>
          <el-form-item prop="abstract" label="APP首页轮播图描述：" :label-width="formLabelWidth">
            <el-input
              v-model="formB.describes"
              disabled
              :rows="4"
              type="textarea"
              placeholder="请输入轮播图描述"
              resize="none"
            />
          </el-form-item>
          <el-form-item
            prop="abstract"
            label=" APP首页轮播图图片："
            :label-width="formLabelWidth"
          >
            <img
              :src="'http://'+formB.url"
              class="avatar"
              style="width: 300px;height: 175px;"
            >
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!--          <el-button class="up-img">上传图片</el-button>-->
          <!-- <el-button @click="dialogTableVisible = false">取  消</el-button> -->
          <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </page>
</template>

<script>
import {
  getCarousel,
  addContent,
  screenContent,
  editContent,
  appDeleteByIds
} from '@/api/operate.js'
import { formatDateAndTime } from '@/utils/util'
import config from '@/settings'
export default {
  inject: ["reload"],
  data() {
    return {
      upUrl: '',
      // 标题输入框
      titleInput: "",
      // 开发人员输入框
      developers: "",
      // 发布时间下拉框
      releaseTime: "",
      // 表格列表
      tableData: [],
      // 弹出窗口
      dialogTableVisible: false,
      dialogFormVisible: false,
      changeVisible: false,
      // 分页
      currentPage: 1,
      totalNum: 0,
      pageSize: 6,
      // 弹出窗口一
      formA: {
        titleA: "",
        describes: ""
      },
      formB: {
        title: "",
        describes: ""
      },
      // 表单   验证规则
      contentRules: {
        abstract: []
      },
      formLabelWidth: "200px",
      // 上传图片
      fileList: [],
      token: {
        type: 6,
        whether: true
      },
      dialogImageUrl: "",
      dialogVisible: false,
      url: '',
      carouselCode: '',
      uploadUrl: config.uploadUrl,
      disabled: false,
      multipleSelection: [],
    }
  },
  created() {
    // this.upUrl = this.uploadUrl
    this.getListData(this.currentPage, this.pageSize)
    // console.log('uploadUrl :', uploadUrl);
  },
  methods: {
    getListData(num, size) {
      getCarousel({
        pageNum: num,
        pageSize: size
      }).then(res => {
        console.log(res);
        // for (let i = 0; i < res.data.list.length; i++) {
        //   res.data.list[i].createTime = formatDateAndTime(
        //     res.data.list[i].createTime
        //   );
        // }
        this.tableData = res.data.list;
        this.totalNum = res.data.total;
        if(res.data.total >= 4) {
          this.disabled = true
        }
      });
    },
    // 筛选后的数 据列表
    screenButton() {
      // console.log(this.releaseTime)
      screenContent({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        title: this.titleInput,
        userCode: this.developers,
        createTime: this.releaseTime
      }).then(res => {
        console.log(res, "筛选返回结果");
        // for (let i = 0; i < res.data.list.length; i++) {
        //   res.data.list[i].createTime = formatDateAndTime(
        //     res.data.list[i].createTime
        //   );
        // }
        this.tableData = res.data.list;
        this.totalNum = res.data.total;
      });
    },
    openModal() {
      if (this.totalNum >= 4) {
        this.dialogFormVisible = false
      } else {
        this.dialogFormVisible = true
      }
    },
    upContent() {
      addContent({
        describes: this.formA.describes,
        title: this.formA.titleA,
        url: this.url
      }).then(res => {
        this.formA.describes = ''
        this.formA.titleA = ''
        this.url = ''
        this.getListData(this.currentPage, this.pageSize);
      });
    },
    changeContent() {
      editContent({
        id: this.formB.id,
        describes: this.formB.describes,
        title: this.formB.title,
        url: this.formB.url
      }).then(res => {
        console.log(res);
        this.getListData(this.currentPage, this.pageSize);
      });
    },

    // 上传图片
    handleRemove(file, fileList) {
      const list = file.response;
    },
    hanldesucc(res, file, fileList) {
      this.url = file.response.data.Url;
    },
    hanldechange(res, file, fileList) {
      console.log('file :', file);
      this.formB.url = file.response.data.Url
    },
    // 查看
    seeDetail(data) {
      console.log(data);
      this.formB = data;
    },
    // 修改
    changeDetail(data) {
      this.formB = data;
    },
    currentPageNum(val) {
      this.getListData(val, 6);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 批量删除
    delAll(val) {
      const delAllList = []
      for (let i = 0; i < val.length; i++) {
        delAllList.push(val[i].carouselCode)
      }
      appDeleteByIds(delAllList).then(res => {
        this.getListData(this.currentPage, this.pageSize)
      })
    }
  }
};
</script>
<style scoped lang="scss">
.carousel-age {
  font-family: PingFang-SC-Bold;
  width: 100%;
  /*height: 100%;*/
  /*overflow: auto;*/
  padding: 0 110px 0 30px;
  margin: 16px 0;
}
.title {
  width: 100%;
  height: 37px;
  display: flex;
  flex-flow: nowrap row;
  margin: 16px 0;
  justify-content: space-between;
}
.title-left {
  height: 37px;
  display: flex;
  align-items: center;
  float: left;
}
.title-left > div {
  width: 11px;
  height: 20px;
  display: inline-block;
  background: rgba(72, 141, 255, 1);
  border-radius: 4px;
}
.title-left > p {
  margin-left: 14px;
}
.data-lie {
  position: relative;
  width: 100%;
  /*height: 913px;*/
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 0 20px 50px 24px;
  margin-bottom: 120px;
}
.edge {
  margin-bottom: 20px;
  width: 100%;
  height: 1px;
  background: rgba(241, 241, 241, 1);
}
.data-top {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
}
.data-top > h1 {
  font-size: 14px;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
}
.data-top > p {
  font-size: 14px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-left: 50px;
}
.data-input {
  height: 40px;
  width: 189px;
  margin-left: 20px;
}
.data-button {
  width: 108px;
  height: 40px;
  font-size: 14px;
  background: rgba(72, 141, 255, 1);
  border-radius: 2px 4px 4px 4px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 40px;
  margin-left: 74px;
}
</style>

